<template>
  <div class="scroll-bar" ref="scrollbar" :style="{width:Barwidth+'px',height:BarHeight+'px' }">
    <div
      class="scroll-bar-active"
      ref="scrollbarActive"
      :style="{ left: left + 'px',width:activeBarWidth+'px' }"
    ></div>
  </div>
</template>

<script>
export default {
  props:{
		Barwidth:{},
		BarHeight:{},
		activeBarWidth:{},
		presentMove:{},
	},
	data() {
		return {
			left:0,
		}
	},
	watch:{
		presentMove(newval) {
			this.getLeft(newval)
		},
	},
	methods:{
		getLeft(presentMove) {
			let presentBarW=this.$refs.scrollbar.clientWidth-this.$refs.scrollbarActive.clientWidth
      let left = presentMove*presentBarW
      this.left=left
		},
	},
};
</script>

<style lang="scss" scoped>
.scroll-bar {
		margin: 0 auto;
    border-radius: 10px;
    background-color: #ddd;
    position: relative;
    .scroll-bar-active {
      position: absolute;
      height: 100%;
      border-radius: 10px;
      background-color: #666;
    }
  }
</style>